<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>django-websocket</title>

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

</head>
<body>
<br>
<input type="text" id="message" value="Hello, World!"/>
<button type="button" id="send_message">发送 message</button>
<h1>Received Messages</h1>
<div id="messagecontainer">

</div>
<script type="text/javascript">//<![CDATA[
$(function () {
    $('#send_message').click(function () {
        var socket = new WebSocket("ws://127.0.0.1:8000/echo_once/");
        console.log(window.location.host);
        socket.onopen = function () {
            console.log('WebSocket open');//成功连接上Websocket
            var s = $('#message').val();
            console.log(s);
            socket.send(s);//发送数据到服务端
        };
        socket.onmessage = function (e) {
            console.log('message: ' + e.data);//打印服务端返回的数据
            $('#messagecontainer').prepend('<p>' + e.data + '</p>');
        };
    });
});
//]]></script>
</body>
</html>